<template>
	<h-chart-container :options="options"></h-chart-container>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
import type { EChartsOption, EChartsCoreOption } from 'echarts';

import HChartContainer from './HChartContainer.vue';

export default defineComponent({
	name: 'HRichChart',

	components: {
		HChartContainer,
	},

	setup() {
		const options = ref<EChartsCoreOption>({
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)',
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'],
			},
			series: [
				{
					name: '访问来源',
					type: 'pie',
					selectedMode: 'single',
					radius: [0, '30%'],

					label: {
						position: 'inner',
					},
					labelLine: {
						show: false,
					},
					data: [
						{ value: 335, name: '直达', selected: true },
						{ value: 679, name: '营销广告' },
						{ value: 1548, name: '搜索引擎' },
					],
				},
				{
					name: '访问来源',
					type: 'pie',
					radius: ['40%', '55%'],
					label: {
						formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
						backgroundColor: '#eee',
						borderColor: '#aaa',
						borderWidth: 1,
						borderRadius: 4,
						shadowBlur: 3,
						shadowOffsetX: 2,
						shadowOffsetY: 2,
						shadowColor: '#999',
						padding: [0, 7],
						rich: {
							a: {
								color: '#999',
								lineHeight: 22,
								align: 'center',
							},
							abg: {
								backgroundColor: '#333',
								width: '100%',
								align: 'right',
								height: 22,
								borderRadius: [4, 4, 0, 0],
							},
							hr: {
								borderColor: '#aaa',
								width: '100%',
								borderWidth: 0.5,
								height: 0,
							},
							b: {
								fontSize: 16,
								lineHeight: 33,
							},
							per: {
								color: '#eee',
								backgroundColor: '#334455',
								padding: [2, 4],
								borderRadius: 2,
							},
						},
					},
					data: [
						{ value: 335, name: '直达' },
						{ value: 310, name: '邮件营销' },
						{ value: 234, name: '联盟广告' },
						{ value: 135, name: '视频广告' },
						{ value: 1048, name: '百度' },
						{ value: 251, name: '谷歌' },
						{ value: 147, name: '必应' },
						{ value: 102, name: '其他' },
					],
				},
			],
		}) as Ref<EChartsOption>;

		return {
			options,
		};
	},
});
</script>
